import React from 'react';

import Request from '@ajax/index.jsx';
import Tools from '@untils/tools.jsx';
import {APIS_VOL_MANAGE} from '@apis/index.js';
import {volManageFilters, sex} from '@assets/config/global.js';

import RCTable from '@components/table/index.jsx';
import NavTree from '@components/nav_tree/index.jsx';
import PageTopFilter from '@components/page_top_filter/index.jsx';
import VolMsgModal from './vol_msg_modal.jsx';
import RCModal from '@components/modal/index.jsx';

import './scss/index.scss';

const _req = new Request();

class VolunteerManage extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            pagination: null,
            list: [],
            pageSize: 10,
            currentPage: 1,

            name: null,
            duration: null,
            selectedTreeKeys: [],
            expandedKeys: [],

            // 编辑弹框
            editModalVisible: false,
            rowData: {},
            showFooter: false,

            // 删除提示
            delModalVisible: false,
            deleteID: ''
        };
        this.setCallback = Tools.setCallback.bind(this);
        this.topFilterForm = null;
        this.submitType = 'edit';
    }

    componentDidMount() {
        // this.requestList();
    }

    //请求列表
    requestList() {
        let {pageSize, currentPage, name, duration, selectedTreeKeys} = this.state;
        let data = {
            pagination: {
                currentPage: currentPage,
                order: "string",
                orderType: "ACCEPTDATE",
                pageSize: pageSize
            },
            searchContent: {
                name,
                duration,
                orgId: selectedTreeKeys[0] - 0 || 0
            }
        };
        let options = Tools.objectAssign(APIS_VOL_MANAGE.VOLLIST, {data});
        _req.ajaxList(options, this);
    }

    // 行点击
    onRowClick(record) {
        this.setCallback({rowData: record, editModalVisible: true, showFooter: false})
    }

    //树筛选
    treeSeleted(selectedTreeKeys) {
        this.setCallback({selectedTreeKeys, currentPage: 1}, this.requestList);
        this.topFilterForm && this.topFilterForm.resetFields();
    }

    //查询
    submitSelect(filtes) {
        this.setCallback({...filtes, currentPage: 1}, this.requestList)
    }

    //table 刷新
    tableRefresh() {
        this.setCallback({name: '', phone: '', currentPage: 1}, this.requestList);
        this.topFilterForm&&this.topFilterForm.resetFields()
    }

    // 新增弹窗
    append() {
        this.submitType = 'append';
        this.setCallback({
            rowData: {},
            editModalVisible: true,
            showFooter: true
        });
    }

    // 编辑弹窗
    edit(e, record) {
        e.nativeEvent.stopImmediatePropagation();
        e.stopPropagation();
        this.submitType = 'edit';
        this.setCallback({rowData: record, editModalVisible: true, showFooter: true})
    }

    // 新增、编辑提交
    confirmSubmit(formInfo) {
        this.setCallback({editModalVisible: false}, this.editOrAdd.bind(this, formInfo));
    }

    // 新增、编辑取消
    cancelSubmit() {
        this.setCallback({rowData: {}, editModalVisible: false});
    }

    // 编辑与新增
    editOrAdd(formInfo) {
        formInfo.orgId = this.state.selectedTreeKeys[0] - 0 || 0;
        let api = null;
        if (this.submitType === 'edit') {
            api = APIS_VOL_MANAGE.EDITVOL;
            formInfo.id = this.state.rowData.id;
        } else {
            api = APIS_VOL_MANAGE.APPENDVOL;
        }
        let options = Tools.objectAssign(api, {data: formInfo});
        _req.axios(options).then(res => this.requestList());
    }

    // 删除
    del(e, id) {
        e.nativeEvent.stopImmediatePropagation();
        e.stopPropagation();
        this.setCallback({deleteID: id, delModalVisible: true})
    }

    // 删除弹框取消
    cancelDel() {
        this.setCallback({deleteID: '', delModalVisible: false})
    }

    // 删除框确认
    confirmDel() {
        let options = APIS_VOL_MANAGE.DELETEVOL(this.state.deleteID);
        _req.axios(options).then(res => {
            this.setCallback({deleteID: '', delModalVisible: false}, this.requestList)
        }, err => {

        })
    }

    render() {

        let {
            pagination = null,
            list = [],
            editModalVisible = false,
            rowData = {},
            showFooter = false,
            delModalVisible = false,
            expandedKeys = [],
            selectedTreeKeys = [],
        } = this.state;

        const columns = [{
            title: '序号',
            key: '序号',
            render: (txt, row, index) => <span>{index + 1}</span>
        }, {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            render: (txt) => <p className="ell-1" title={txt || ''}>{txt || '---'}</p>
        }, {
            title: '手机号码',
            dataIndex: 'phone',
            key: 'phone',
            render: (txt) => <span>{txt || '---'}</span>
        }, {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
            render: (txt) => <span>{sex[txt] ? sex[txt].name : '---'}</span>
        }, {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
            render: (txt) => <span>{txt || '---'}</span>
        }, {
            title: '服务时长（小时）',
            dataIndex: 'duration',
            key: 'duration',
            render: (txt) => <span>{txt || '---'}</span>
        }, {
            title: '操作',
            render: (record) => {
                return (
                    <div className="option-btns">
                        <span className="btn-edit btn-item"
                              onClick={(e) => this.edit(e, record)}>
                        </span>
                        <span className="btn-del btn-item"
                              onClick={(e) => this.del(e, record.id)}>
                        </span>
                    </div>
                )
            }
        }];

        return (
            <div className="volunteer-manage child-wrap">
                <NavTree
                    // navTitle={'志愿者信息'}
                    onSelect={this.treeSeleted.bind(this)}
                    // 展开受限制 要传expandedKeys onExpand selectedTreeKeys
                    // 以下三个都不传 是 一个自由组建
                    expandedKeys={expandedKeys}
                    selectedKeys={selectedTreeKeys}
                    onExpand={this.setCallback.bind(this)}
                />
                <div className="child-main-wrap">
                    <div className="child-main-content">
                        <PageTopFilter
                            title="志愿者查询"
                            filters={volManageFilters}
                            buttons={['查询', '新增']}
                            submitForm={this.submitSelect.bind(this)}
                            // 新增按钮
                            cancelForm={this.append.bind(this)}
                            wrappedComponentRef={node => this.topFilterForm = node}
                        />
                        <RCTable
                            columns={columns}
                            dataSource={list}
                            pagination={pagination}
                            refresh={this.tableRefresh.bind(this)}
                            clickRow={this.onRowClick.bind(this)}
                            onChange={(pagination) => {
                                let {selectedRowKeys = [], current: currentPage, pageSize, name = ''} = pagination;
                                this.setCallback({selectedRowKeys, pageSize, currentPage, name}, this.requestList)
                            }}
                        />
                    </div>
                </div>
                {
                    editModalVisible
                        ? <VolMsgModal
                            modalVisible={true}
                            width={800}
                            data={rowData}
                            showFooter={showFooter}
                            submitForm={this.confirmSubmit.bind(this)}
                            cancelForm={this.cancelSubmit.bind(this)}
                        />
                        : null
                }

                <RCModal
                    title='删除提示'
                    visible={delModalVisible}
                    onOk={this.confirmDel.bind(this)}
                    onCancel={this.cancelDel.bind(this)}
                >
                    <p className="del-warning">是否确认删除信息？</p>
                </RCModal>
            </div>
        )
    }
}

export default VolunteerManage;